<template>
	<view>
		<view class="container" v-if="info.id">
			<!--header-->
			<view class="s-header-box" :style="{height:height+'px',background:'rgba(255,255,255,'+opcity+')'}">
				<view class="s-header" :style="{paddingTop:top+'px', opacity:opcity}">
					商品详情
				</view>
				<view class="s-header-icon" :style="{marginTop:top+'px'}">
					<view class="s-icon s-icon-back" @tap="back">
						<view class="icon_image">
							<s-icon name="fanhui" :size="55" :color="opcity >= 1 ? '#000' : '#fff'"></s-icon>
						</view>
					</view>
				</view>
			</view>
			<!--header-->
			
		</view>	
		<view class="s-banner-swiper" v-if="info.images_arr.length">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" :style="{height:scrollH + 'px'}" @change="bannerChange">
				<block v-for="(item,index) in info.images_arr" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item" class="s-slide-image" :style="{height:scrollH+'px'}" />
					</swiper-item>
				</block>
			</swiper>
			<s-tag class="s-tag-class" type="translucent" shape="circleLeft" size="small">{{bannerIndex+1}}/{{info.images_arr.length}}</s-tag>
		</view>
		<view class="s-pro-detail">
			<view class="s-product-title s-border-radius">
				<view class="s-pro-pricebox s-padding">
					<view class="s-pro-price">
						<view>￥<text class="s-price">{{money}}</text></view>
						<s-tag size="small" class="s-tag-class" :plain="true" type="high-green" shape="circle">新品</s-tag>
					</view>
					<view class="s-collection s-size" @tap="product_collection">
						<s-icon v-if="info.collection_status" name="aixin" :size="55" color="#d81e06"></s-icon>
						<s-icon v-else name="shoucang" :size="55" color="#333333"></s-icon>
						
						<view :class="info.collection_status?'s-scale collection_color':'s-scale'">收藏</view>
					</view>
				</view>
				<view class="s-original-price s-gray">
					价格
					<text class="s-line-through">￥{{bazaar_money}}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="s-pro-titbox">
					<view class="s-pro-title">{{info.name}}</view>
					<view class="s-share-btn s-share-position" @tap="showCode">
						<s-tag type="gray" s-tag-class="s-tag-share s-size" shape="circleLeft" size="small">
							<s-icon name="fenxiang" :size="33" color="#333333"></s-icon>
							<text class="s-share-text s-gray">分享</text>
						</s-tag>	
					</view>
				</view>
				<!-- #endif -->
			</view>	
			<s-bottom-popup :show="codeShow" @close="hideCode">
				<view class="share-pro-dialog">
					<view class="share-pro-title">分享</view>
					<view class="close-btn" @tap="hideCode">
						<s-icon name="guanbi" :size="44" color="#000000"></s-icon>
					</view>
					<view class="share-pro-body">
						<view class="share-item">
							<button open-type="share" class="s-share-btn">
								<image src="../../static/images/icon/wechat.png" class="share-image"></image>
								<view >分享给好友</view>
							</button>
						</view>
						<view class="share-item" @tap="createCanvasImageEvn">
							<image src="../../static/images/icon/pic_wechat.png" class="share-image"></image>
							<view>生成分享图片</view>
						</view>
					</view>	
				</view> 
			</s-bottom-popup>
			<view class="s-basic-info s-mtop s-radius-all">
				<view class="s-list-cell" @tap="showPopup">
					<view class="s-bold s-cell-title">已选</view>
					<view class="s-selected-box">{{sku_str}}</view>
					<image  class="s-right" src="../../static/images/icon/nav1.png"></image>
				</view>
				<view class="s-list-cell s-last">
					<view class="s-bold s-cell-title">运费</view>
					<view class="s-selected-box">{{postage>0?postage:'在线支付免运费'}}</view>
				</view>
			</view>
			<view class="s-operation">
				<view class="s-operation-left s-col-5">
					<button hover-class="none" open-type="contact" session-from="weapp" class="s-operation-item special" :hover-stay-time="150">
						<view class="images_class">
							<s-icon name="kefu"  :size="40" color="#333333"></s-icon>
						</view>
						<view class="s-operation-text s-scale-small">客服</view>
					</button>
					<view class="s-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="lick_index">
						<view class="images_class">
							<s-icon name="shouye" :size="40" color="#333333"></s-icon>
						</view>
						<view class="s-operation-text s-scale-small">首页</view>
					</view>
					<view class="s-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="lick_cart">
						<view class="images_class">
							<s-icon name="gouwucheman" :size="40" color="#333333"></s-icon>
						</view>
						<view class="s-operation-text s-scale-small">购物车</view>
						<s-badge type="danger" class="s-badge-cart" size="small" v-if="cart_num>0">{{cart_num}}</s-badge>
					</view>
				</view>
				<view class="s-operation-right s-right-flex s-col-7 s-btnbox-4">
					<view class="s-flex-1">
						<s-button type="danger" shape="circle" size="mini" @click="showPopup(0)">加入购物车</s-button>
					</view>
					<view class="s-flex-1">
						<s-button type="warning" shape="circle" size="mini" @click="showPopup(1)">立即购买</s-button>
					</view>
				</view>
			</view>
			<!---顶部下拉菜单-->
			
			<!--底部选择层-->
			<s-bottom-popup :show="popupShow" @close="hidePopup">
				<view class="s-popup-box">
					<view class="s-product-box s-padding">
						<image :src="info.image_url" class="s-popup-img"></image>
						<view class="s-popup-price">
							<view class="s-name">{{info.name}}</view>
							<view class="s-amount s-bold">￥{{money}}</view>
							<view class="s-number">原价￥{{bazaar_money}}</view>
							<view class="s-number">库存{{stock}}件</view>
						</view>
					</view>
					<scroll-view scroll-y class="s-popup-scroll" v-if="info.attrbute_list">
						<view class="s-scrollview-box" v-for="(item,index) in info.attrbute_list" :key="index">
							<view class="s-bold s-attr-title">{{item.name}}</view>
							<view class="s-attr-box">
								<view v-for="(it,ind) in item.sub" :key="ind" :data-id="it.id" :data-index="index" :class="sku[index]==it.id?'s-attr-item s-attr-active':'s-attr-item'" @click="sku_click">
									{{it.name}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="s-number-box s-bold" v-if="stock>0">
						<view class="s-attr-title">数量</view>
						<view class="s-attr-title">
							<s-numberbox :max="stock" :min="1" :value="value" @change="change"></s-numberbox>
						</view>
					</view>
					<s-button v-if="stock==0" type="primary" :disabled="true" shape="circle" size="block">库存不足</s-button>
					<s-button v-if="stock>0&&btn_status==0" type="red" shape="circle" size="block" @click="add_cart">加入购物车</s-button>
					<s-button v-if="stock>0&&btn_status==1" type="danger" shape="circle" size="block" @click="add_product_order">立即购买</s-button>
					<view class="s-icon-close" @tap="hidePopup">
						<s-icon name="guanbi" :size="44" color="#000000"></s-icon>
					</view>
				</view>
			</s-bottom-popup>
			<!--底部选择层-->
			<view class="s-nomore-box"> 
				<s-divider dividerColor="#000000" width="60%" color="#000000" :size="32">详情</s-divider>
				<s-feng-parse :content="info.content"></s-feng-parse>
				<s-nomore text="已经到最底了" :visible="true" bgcolor="#f7f7f7"></s-nomore>
			</view>
			
		</view>
		<s-poster ref="sPoster" :canvasFlag.sync="canvasFlag" @cancel="canvasCancel" :posterObj.sync="posterData"/>
		<view :hidden="canvasFlag"><!-- 海报canvas-->
			<canvas class="canvas"  canvas-id="myCanvas"></canvas><!-- 海报 -->
		</view>
	</view>
	
</template>
<script>
	export default {
		data() {
			return {
				id:'',//商品id
				info:{},//商品详情
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				bannerIndex: 0,
				popupShow: false,
				codeShow:false,
				index:0,//当前选中的规格下标
				sku:[],//当前选中的商品规格
				sku_str:'',//当前选择商品的详情
				bazaar_money:'',//市场价
				money:'',//价格
				stock:0,//当前库存
				postage:0,//邮费
				value: 1,//购买个数
				btn_status:1,
				cart_num:0,//购物车数量
				canvasFlag: true,
				posterData:{}
			}
		},
		onLoad: function(options) {
			this.id = options.id;
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
						this.scrollH = res.windowWidth
					}
				})
			}, 50)
		},
		async onShow() {
			await this._onLoad();
		},
		methods: {
			// 生成海报
			async createCanvasImageEvn(){ 
				this.canvasFlag = true
				this.codeShow = false
				const data = await this.$s.model.user.appCode(this.id)
				// 这个是固定写死的小程序码
				Object.assign(this.posterData,
				{
					url:this.info.images_arr[0]?this.info.images_arr[0]:this.info.image_url,//商品主图
					icon:data.icon_url,//醉品价图标
					title:this.info.name,//标题
					discountPrice:this.money,//折后价格
					orignPrice:this.bazaar_money,//原价
					code:data.code_url,//小程序码
				})
				this.$forceUpdate();//强制渲染数据
				setTimeout(()=>{
					this.canvasFlag=false;//显示canvas海报
					this.deliveryFlag = false;//关闭分享弹窗
					this.$refs.sPoster.createCanvasImage();//调用子组件的方法
				},500)
			},
			// 取消海报
			canvasCancel(val){
				this.canvasFlag=val;
			},
			//默认方法
			async _onLoad(callBack){
				 await this.getProductDetail()
				 await this.getCartSum()
			},
			//商品详情
			async getProductDetail() {
				const data = await this.$s.model.product.getProductDetail(this.id)
				this.info = data;
				this.bazaar_money = data.product_spec_to[this.index].bazaar_money;
				this.money = data.product_spec_to[this.index].money;
				this.stock = data.product_spec_to[this.index].stock;
				this.sku = data.product_spec_to[this.index].sku.split('|');
				this.postage = data.product_spec_to[this.index].postage;
				this.$s.model.product.skuStr(this)
			},
			//购物车数量
			async getCartSum(callBack){
				const data = await this.$s.model.cart.getCartSum()
				this.cart_num = data.cart_num
			},
			//跳转首页
			lick_index(){
				this.$s.uniApi.switchTab({url:'../index/index'})
			},
			//跳转购物车
			lick_cart(){
				this.$s.uniApi.switchTab({url:'../cart/cart'})
			},
			//商品收藏
			async product_collection(){
				const data = await this.$s.model.product.productCollection(this.info.id)
				if(data.code === 8888){
					this.info.collection_status = this.info.collection_status==1?0:1
					this.$s.uniApi.showToast({title: data.msg})
				}
			},
			//加入购物车
			async add_cart(){
				const data = await this.$s.model.cart.addCart({
					product_id:this.id,
					specs_id:this.info.product_spec_to[this.index].id,
					num:this.value,
					specs:this.sku_str,
				}) 
				if(data.code === 8888){
					this.$s.uniApi.showToast({title: data.msg});
					this.cart_num = data.data.cart_num;
					this.popupShow = false
				}
			},
			//普通商品立即购买
			add_product_order(){
				var that = this;
				that.popupShow = false
				this.$s.uniApi.navigateTo({url:'../submit_order/submit_order?product_id=' + that.id + '&specs_id=' + that.info.product_spec_to[that.index].id + '&num=' + that.value + '&specs=' + that.sku_str})			
			},
			//返回
			back(){
				this.$s.uniApi.navigateBack({});
			},
			//sku选择
			sku_click(e){
				var index = this.$s.api.getDataSet(e,'index');
				this.sku[index] = this.$s.api.getDataSet(e,'id');
				var sku = this.sku.join('|');
				for(var i=0;i<this.info.product_spec_to.length;i++){
					if(this.info.product_spec_to[i].sku == sku){
						this.bazaar_money = this.info.product_spec_to[i].bazaar_money * this.value;
						this.bazaar_money = this.bazaar_money.toFixed(2);
						this.money = this.info.product_spec_to[i].money * this.value;
						this.stock = this.info.product_spec_to[i].stock;
						this.money = this.money.toFixed(2);
						this.postage = this.info.product_spec_to[this.index].postage * this.value;
						this.postage = this.postage.toFixed(2);
						this.$s.model.product.skuStr(this);
						this.index = i;
					}
				}
			},
			// 轮播监听
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current
			},
			// 图片放大
			previewImage: function(e) {
				var index = this.$s.api.getDataSet(e,'index');
				uni.previewImage({
					current: this.info.images_arr[index],
					urls: this.info.images_arr
				})
			},
			showPopup: function(btn_status) {
				this.btn_status = btn_status;
				this.popupShow = true
			},
			hidePopup: function() {
				this.popupShow = false
			},
			showCode(){
				this.codeShow = true
			},
			hideCode(){
				this.codeShow = false
			},
			//商品加减
			change: function(e) {
				this.value = e.value;
				var sku = this.sku.join('|');
				for(var i=0;i<this.info.product_spec_to.length;i++){
					if(this.info.product_spec_to[i].sku == sku){
						this.bazaar_money = this.info.product_spec_to[i].bazaar_money * this.value;
						this.bazaar_money = this.bazaar_money.toFixed(2);
						this.money = this.info.product_spec_to[i].money * this.value;
						this.stock = this.info.product_spec_to[i].stock;
						this.money = this.money.toFixed(2);
						this.postage = this.info.product_spec_to[this.index].postage * this.value;
						this.postage = this.postage.toFixed(2);
					}
				}
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity)
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this._onLoad();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage() {
			this.codeShow = false
			return this.$s.uniApi.onShareAppMessage({path:'../pages/product_detail/product_detail?id='+this.id})
		}
	}
</script>

<style lang="scss" scoped>
@import 'product_detail.scss';
</style>
